<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
  <head>
    <title>EasyUI入门——EasyUI的easyloader的使用</title>
  <!-- 引入JQuery -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/static/jQuery/jquery-1.11.3.min.js"></script>
  <!-- 引入easyloader.js -->
  <script type="text/javascript" src="${pageContext.request.contextPath}/static/eui/easyloader.js"></script>
  
  <script type="text/javascript">
      $(function(){
          //使用easyloader加载dialog模块使用到的相关js和css样式
          easyloader.load('dialog',function(){
              /*使用JavaScript动态创建EasyUI的Dialog的步骤：
                1、定义一个div，并给div指定一个id
                2、使用Jquery选择器选中该div，然后调用dialog()方法就可以创建EasyUI的Dialog
                */
                //使用自定义参数创建EasyUI的Dialog
                $('#dd2').dialog({
                    title: '使用JavaScript创建的Dialog',
                    width: 400,
                    height: 200,
                    closed: false,
                    cache: false,
                    modal: true
                });
          });
          
          easyloader.locale = "zh_CN";
          //easyloader.load 还有一个别名 using 定义在 window 对象上
          //使用easyloader加载messager模块使用到的相关js和css样式
        using("messager", function () {
            alert("加载成功！");
            $("#btnAlert").click(function () {
                $.messager.alert('Warning', 'The warning message');
            });
        });
      });
  </script>
  
  </head>
  
  <body>
      <%--使用纯html的方式创建创建EasyUI的Dialog的步骤：
      1、定义一个div
      2、将div的class样式属性设置成easyui-dialog，这样就可以将普通的div变成EasyUI的Dialog了
       --%>
    <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style="width: 500px;height: 300px;">
        Hello World!
    </div>
    <div id="dd2">Dialog Content</div>
    <a id="btnAlert" class="easyui-linkbutton">弹出提示框</a>
  </body>
</html>